﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <title>jqxScrollBar API Reference</title>
    <meta name="keywords" content="jQuery, ScrollBar, Scroll Widget." />
    <meta name="description" content="This page represents the help documentation of the jqxRating widget." />
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
    <div id="properties">
        <h2 class="documentation-top-header">
            Properties</h2>
        <table class="documentation-table">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Type
                </th>
                <th>
                    Default
                </th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='property-name-disabled'>height</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets width of the scroll bar.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxScrollBar with the <code>height</code> property specified.
                        </p>
                        <pre><code>$('#jqxScrollBar').jqxScrollBar({ height: '25px', }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span1'>width</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets width of the scroll bar.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxScrollBar with the <code>width</code> property specified.
                        </p>
                        <pre><code>$('#jqxScrollBar').jqxScrollBar({ width: '250px' }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span2'>vertical</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets the scrollbar's orientation.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxScrollBar with the <code>vertical</code> property specified.
                        </p>
                        <pre><code>$('#jqxScrollBar').jqxScrollBar({ vertical: true }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span3'>min</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    0
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets the scrollbar's minimum value.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxScrollBar with the <code>min</code> property specified.
                        </p>
                        <pre><code>$('#jqxScrollBar').jqxScrollBar({ min:7 }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span4'>max</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    1000
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets the scrollbar's maximum value.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxScrollBar with the <code>max</code> property specified.
                        </p>
                        <pre><code>$('#jqxScrollBar').jqxScrollBar({ max:700 }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span5'>value</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets the scrollbar's value.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxScrollBar with the <code>value</code> property specified.
                        </p>
                        <pre><code>$('#jqxScrollBar').jqxScrollBar({ value:700 }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span6'>step</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    10
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets the scrollbar's step. The value is increased/decreased with this step
                            when the user presses a scrollbar button.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxScrollBar with the <code>step</code> property specified.
                        </p>
                        <pre><code>$('#jqxScrollBar').jqxScrollBar({ step:7 }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span7'>largestep</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    50
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets the scrollbar's largestep. The value is increased/decreased with this
                            largestep when the user presses the left mouse button in the area between a scrollbar
                            button and thumb.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxScrollBar with the <code>largestep</code> property specified.
                        </p>
                        <pre><code>$('#jqxScrollBar').jqxScrollBar({ largestep:35 }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span8'>thumbMinSize</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    10
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Specifies the scrollbar thumb's minimum size.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxScrollBar with the <code>thumbMinSize</code> property specified.
                        </p>
                        <pre><code>$('#jqxScrollBar').jqxScrollBar({ thumbMinSize:5 });</code></pre>
                    </div>
                </td>
            </tr>
                <tr>
                <td class="documentation-option-type-click">
                    <span id='Span9'>showButtons</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or set whether the scrollbar displays the increase and decrease arrow buttons..
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxScrollBar with the <code>showButtons</code> property specified.
                        </p>
                        <pre><code>$('#jqxScrollBar').jqxScrollBar({ showButtons: true });</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span10'>disabled</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or set whether the scrollbar is disabled.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxScrollBar with the <code>disabled</code> property specified.
                        </p>
                        <pre><code>$('#jqxScrollBar').jqxScrollBar({ disabled:true });</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Events</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span27'>valuechanged</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the value is changed.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the valuechanged event by type: jqxScrollBar.
                        </p>
                        <pre><code>$('#jqxScrollBar').bind('valuechanged', function () { // Some code here.});</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Methods</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span37'>setPosition</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the thumb's position
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the setPosition method.
                        </p>
                        <pre><code>//@param Number</code></pre>
                        <pre><code>$('#jqxScrollBar').jqxScrollBar('setPosition', 50); </code></pre>
                    </div>
                </td>
            </tr>
        </table>
        <br />
    </div>
</body>
</html>
